<div>
  <cly-drawer
    toggle-transition="stdt-fade"
    ref="userDrawer"
    :title="$props.settings.editMode ? $props.settings.editTitle : $props.settings.createTitle"
    @close="onClose"
    @submit="onSubmit"
    @open="onOpen"
    :requires-async-submit="true"
    :hasCancelButton="$props.settings.hasCancelButton"
    :cancelButtonLabel="$props.settings.cancelButtonLabel"
    :width="$props.settings.drawerWidth"
		:saveButtonLabel="$props.settings.editMode ? $props.settings.saveButtonLabel : $props.settings.createButtonLabel"
		v-bind="$props.controls">
		<template v-slot:default="drawerScope">
      <cly-form-step id="user-main" screen="full">
        <div class="user-management-drawer-content">
          <div class="bu-columns">
            <div class="bu-column">
              <div class="user-management-drawer-content__input-wrapper">
                <div class="user-management-drawer-content__label">
                  <div class="text-small text-heading">{{ i18n('management-users.full-name') }}</div>
                </div>
                <div class="user-management-drawer-content__input">
                  <validation-provider rules="required" v-slot="v">
                    <el-input v-model="drawerScope.editedObject.full_name" :placeholder="i18n('management-users.enter-full-name')"></el-input>
                  </validation-provider>
                </div>
              </div>
              <div class="user-management-drawer-content__input-wrapper bu-mt-5">
                <div class="user-management-drawer-content__label">
                  <div class="text-small text-heading">{{ i18n('management-users.username') }}</div>
                </div>
                <div class="user-management-drawer-content__input">
                  <validation-provider rules="required" v-slot="v">
                    <el-input v-model="drawerScope.editedObject.username" :placeholder="i18n('management-users.enter-username')"></el-input>
                  </validation-provider>
                </div>
              </div>
              <div class="user-management-drawer-content__input-wrapper bu-mt-5">
                <div class="user-management-drawer-content__label">
                  <div class="text-small text-heading">{{ i18n('management-users.password') }}</div>
                </div>
                <div v-if="!$props.settings.editMode" class="user-management-drawer-content__input">
                  <validation-provider rules="required" v-slot="v">
                    <el-input v-model="drawerScope.editedObject.password" :placeholder="i18n('management-users.enter-password')"></el-input>
                  </validation-provider>
                  <div @click="generatePassword()" class="user-management-drawer-content__under-input-text bu-mt-1 bu-is-size-7">{{ i18n('management-users.generate-password') }}</div>
                </div>
                <div v-if="$props.settings.editMode" class="user-management-drawer-content__input">
                  <validation-provider v-if="changePasswordFlag" rules="required" v-slot="v">
                    <el-input v-model="drawerScope.editedObject.password" :placeholder="i18n('management-users.enter-password')"></el-input>
                  </validation-provider>
                  <div v-if="!changePasswordFlag" @click="changePasswordFlag = !changePasswordFlag" class="user-management-drawer-content__under-input-text bu-mt-1 bu-is-size-7">{{ i18n('management-users.change-password') }}</div>
                </div>
              </div>
              <div class="user-management-drawer-content__input-wrapper bu-mt-5">
                <div class="user-management-drawer-content__label">
                  <div class="text-small text-heading">{{ i18n('management-users.email') }}</div>
                </div>
                <div class="user-management-drawer-content__input">
                  <validation-provider rules="required|email" v-slot="v">
                    <el-input v-model="drawerScope.editedObject.email" oninput="this.value = this.value.toLowerCase();" :placeholder="i18n('management-users.enter-email')"></el-input>
                  </validation-provider>
                </div>
              </div>
              <component class="bu-mt-5" v-if="groupsInput.length > 0" :defaultGroups="groups" @group-change="onGroupChange" :is="groupsInput[0].component"></component>
            </div>
            <div class="bu-column user-management-drawer-content__profile-picture-area bu-ml-4">
              <div class="user-management-drawer-content__label">
                <div class="text-small text-heading">{{ i18n('management-users.profile-picture') }}</div>
              </div>
              <div class="bu-is-flex" v-if="!pictureEditMode && $props.settings.editMode">
                <!-- we have problem at here about image src, will be fixed, already noted. -->
                <img class="user-management-drawer-content__user-pp" :src="'/memberimages/' + drawerScope.editedObject._id + '.png?t=' + Date.now()"/>
                <cly-more-options class="user-management-drawer-content__pp-options" size="small" @command="handlePPCommand($event)">
                  <el-dropdown-item command="edit-pp">{{i18n('common.edit')}}</el-dropdown-item>
                </cly-more-options>
              </div>
              <cly-dropzone
                v-if="pictureEditMode || !$props.settings.editMode"
                @vdropzone-removed-file="onFileRemoved"
                @vdropzone-file-added="onFileAdded"
                @vdropzone-sending="onSending"
                @vdropzone-thumbnail="thumbnail"
                @vdropzone-complete="onComplete"
                ref="userDrawerDropzone"
                id="user-drawer-dropzone"
                :useCustomSlot=true
                :options="dropzoneOptions">
                    <div class="dropzone-custom-content">
                      <img v-if="$props.settings.editMode" :src="'/memberimages/' + user._id + '.png?t=' + Date.now()" class="user-management-drawer-content__profile-picture-area__upload-section__img-box"/>
                      <div v-if="!$props.settings.editMode" class="user-management-drawer-content__profile-picture-area__upload-section__img-box"></div>
                      <div class="user-management-drawer-content__profile-picture-area__upload-section__description-box">
                        <p class="user-management-drawer-content__profile-picture-area__upload-section__description-box--bold">{{ i18n('management-users.drag-and-drop-or') }} <span class="user-management-drawer-content__profile-picture-area__upload-section__description-box--link"> {{ i18n('management-users.browser') }} </span> {{ i18n('management-users.files-to-add-picture') }}</p>
                        <p class="user-management-drawer-content__profile-picture-area__upload-section__size-warning">{{ i18n('management-users.pp-size-warning') }}</p>
                      </div>
                    </div>
              </cly-dropzone>
            </div>
          </div>
          <div v-if="groups.length === 0" class="user-management-drawer-content__bottom-section">
            <div class="user-management-drawer-content__drawer-sub-section bu-px-4 bu-pt-4 bu-pb-5">
              <div class="user-management-drawer-content__section-title">
                <div>
                  <span class="user-management-drawer-content__section-header">{{ i18n('management-users.role') }}</span>
                </div>
              </div>
              <div class="user-management-drawer-content__section-content user-management-drawer-content__role-section">
                <el-checkbox class="bu-mt-2" v-model="drawerScope.editedObject.global_admin">{{ i18n('management-users.global-administrator') }}</el-checkbox>
                <component v-for="roleInput in rolesInput" :is="roleInput.component" :user="drawerScope.editedObject" @role-change="onRoleChange" key="roleInput.key"></component>
              </div>
            </div>
            <div v-if="!drawerScope.editedObject.global_admin && groups.length === 0" class="user-management-drawer-content__drawer-sub-title bu-mt-2">
              {{ i18n('management-users.permission-settings') }}
            </div>
            <div v-if="!drawerScope.editedObject.global_admin && groups.length === 0" class="user-management-drawer-content__drawer-sub-section bu-px-4 bu-pt-4">
              <div class="user-management-drawer-content__section-title">
                <div>
                  <span class="user-management-drawer-content__section-header"> {{ i18n('management-users.grant-admin-access-to-apps') }} <cly-tooltip-icon icon="ion ion-help-circled"></cly-tooltip-icon></span>
                </div>
                <div>
                </div>
              </div>
              <div class="user-management-drawer-content__section-content">
                <div class="user-management-drawer-content__label user-management-drawer-content__label--pl-10">
                  <div class="user-management-drawer-content__help-text">{{ i18n('management-users.grant-admin-access-description') }}</div>
                </div>
                <div class="input" v-if="drawerScope.editedObject.permission">
                  <cly-select-x
                    :collapse-tags="false"
                    :placeholder="i18n('token_manager.select-apps')"
                    mode="multi-check"
                    @input="onAdminAppsChanged"
                    v-model="drawerScope.editedObject.permission._.a"
                    class="user-management-drawer-content__app-selector bu-mb-5 bu-mt-4"
                    :options="apps">
                  </cly-select-x>
                </div>
              </div>
            </div>
            <div v-if="!drawerScope.editedObject.global_admin && groups.length === 0" :key="index" v-for="(set, index) in permissionSets" class="user-management-drawer-content__drawer-sub-section bu-mt-2 bu-mb-5">
              <div class="user-management-drawer-content__section-title bu-px-4 bu-pt-4">
                <div>
                  <span class="user-management-drawer-content__section-header">{{ i18n('management-users.grant-user-access-to-apps') }} <cly-tooltip-icon icon="ion ion-help-circled"></cly-tooltip-icon></span>
                </div>
                <div>
                  <cly-more-options class="user-management-drawer-content__custom-options" v-if="index > 0" size="small" @command="handleCommand($event, index)">
                    <el-dropdown-item command="remove-set">{{ i18n('management-users.remove-permission-set') }}</el-dropdown-item>
                  </cly-more-options>
                </div>
              </div>
              <div class="user-management-drawer-content__section-content">
                <div class="user-management-drawer-content__label user-management-drawer-content__label--pl-10">
                  <div class="user-management-drawer-content__help-text bu-px-4">{{ i18n('management-users.grant-user-access-to-apps-desc') }}</div>
                </div>
                <div class="user-management-drawer-content__input bu-px-4">
                  <cly-select-x
                    :collapse-tags="false"
                    :placeholder="i18n('token_manager.select-apps')"
                    mode="multi-check"
                    @change="onUserAppsChanged(index)"
                    v-model="drawerScope.editedObject.permission._.u[index]"
                    class="user-management-drawer-content__app-selector bu-mb-5 bu-mt-4"
                    :options="apps">
                  </cly-select-x>
                </div>
                <div class="user-management-drawer-content__permission-table-header bu-px-1">
                  <el-input v-model="filteredFeatures[index].searchQuery" :placeholder="i18n('management-users.search-placeholder')" class="user-management-drawer-content__feature-search" @input="search(index)">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <i slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearSearch(index)"></i>
                  </el-input> 
                  <div class="user-management-drawer-content__permission-type-cols">
                    <div class="user-management-drawer-content__permission-type">
                      <el-checkbox @change="setPermissionByType(index, 'c')" v-model="filteredFeatures[index].all.c">{{ i18n('management-users.create').toUpperCase() }}</el-checkbox>
                    </div>
                    <div class="user-management-drawer-content__permission-type">
                      <el-checkbox @change="setPermissionByType(index, 'r')" v-model="filteredFeatures[index].all.r">{{ i18n('management-users.read').toUpperCase() }}</el-checkbox>
                    </div>
                    <div class="user-management-drawer-content__permission-type">
                      <el-checkbox @change="setPermissionByType(index, 'u')" v-model="filteredFeatures[index].all.u">{{ i18n('management-users.update').toUpperCase() }}</el-checkbox>
                    </div>
                    <div class="user-management-drawer-content__permission-type">
                      <el-checkbox @change="setPermissionByType(index, 'd')" v-model="filteredFeatures[index].all.d">{{ i18n('management-users.delete').toUpperCase() }}</el-checkbox>
                    </div>
                  </div>
                </div>
                <div class="user-management-drawer-content__permission-table-content bu-px-1">
                  <div class="user-management-drawer-content__permission-row bu-mb-5" v-for="feature in filteredFeatures[index].features">
                    <div class="user-management-drawer-content__feature-name">{{featureBeautifier(feature)}}</div>
                    <div class="user-management-drawer-content__feature-permissions">
                      <div class="user-management-drawer-content__permission-box">
                        <el-checkbox @change="setPermissionByFeature(index, 'c', feature)" v-model="permissionSets[index].c.allowed[feature]"></el-checkbox>
                      </div>
                      <div class="user-management-drawer-content__permission-box">
                        <el-checkbox :disabled="feature === 'core'" @change="setPermissionByFeature(index, 'r', feature)" v-model="permissionSets[index].r.allowed[feature]"></el-checkbox>
                      </div>
                      <div class="user-management-drawer-content__permission-box">
                        <el-checkbox @change="setPermissionByFeature(index, 'u', feature)" v-model="permissionSets[index].u.allowed[feature]"></el-checkbox>
                      </div>
                      <div class="user-management-drawer-content__permission-box">
                        <el-checkbox @change="setPermissionByFeature(index, 'd', feature)" v-model="permissionSets[index].d.allowed[feature]"></el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!drawerScope.editedObject.global_admin && groups.length === 0" class="user-management-drawer-content__add-permission-set" @click="addPermissionSet">
              {{ i18n('management-users.add-permission-set') }}
            </div>
          </div>
        </div>
      </cly-form-step>
		</template>
	</cly-drawer>
</div>